<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {height: 2000px;}
		p, input {margin:0; padding:0;}
		#login {width: 300px; padding: 50px; border: 1px solid #000;position: absolute;}
		p {text-align: center;}
		#close {position:absolute; right: 0; top: 0; cursor: pointer;}
	</style>
	<script src="jquery-1.10.1.min.js"></script>
	<script>
	$(function () {
		$('#btn').click(function () {
			if ( document.getElementById('login') ) {			//防止多次点击生成多个 (不能再用oLogin(这个本来就是局部变量，不可取)或者$('#login')，因为这样JQ和JS就混用了)
				return
			};

			var oLogin = $('<div id="login"><p>用户名:<input type="text"></p><p>密&nbsp;码:<input type="password"></p><div id="close">&times;</div></div>');
			$('body').append( oLogin );				//不是document。body加引号

			oLogin.css('left', ( $(window).width() - oLogin.outerWidth() )/2 );
			oLogin.css('top', ( $(window).height() - oLogin.outerHeight() )/2 );
		
			//当滚动或改变窗口大小时	(这个程序竟然是放在点击内部，而不是外部！！！在外部会有问题。)
			// 因为oLogin是局部变量啊，你可以把变量提出去啊。但是最好不要用全局变量
			$(window).on('resize scroll', function () {
				oLogin.css('left', ( $(window).width() - oLogin.outerWidth() )/2 + $(window).scrollLeft() );
				oLogin.css('top', ( $(window).height() - oLogin.outerHeight() )/2 + $(window).scrollTop() );
			})

			$('#close').click(function () {
				oLogin.remove();					//很多地方$('#login')都可以换成oLogin
			})
		})
	})
	</script>
</head>
<body>
<input id="btn" type="button" value="点击" />
<!-- <div id="login">
		<p>用户名:<input type="text"></p>
		<p>密&nbsp;码:<input type="password"></p>
		<div id="close">X</div>
	</div> -->
</body>
</html>